{{extend './layout/layout.html'}}
{{block 'head'}}
<link rel="stylesheet" href="/public/css/header.css">
<!-- <link rel="stylesheet" href="/public/css/show.css"> -->
<link rel="stylesheet" href="/node_modules/github-markdown-css/github-markdown.css">
{{/block}}
{{block 'content'}}
<!-- 引入头部 -->
{{include './component/web-header.html'}}
<!-- body start-->
<div class="container-fluid">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a class="pink-link" href="/">主页</a></li>
            <li class="breadcrumb-item"><a class="pink-link" href="/my">{{user.username}}</a></li>
        </ol>
    </nav>
    <div class="row">
        <div class="col-lg-2">
            <div class="card mt-2 sticky-top">
                <img src="{{user.avatar}}" class="card-img-top mb-3" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{user.username}}</h5>
                    <p class="card-text">blog数:{{notes.length}}</p>
                    <p class="card-text">邮箱:{{user.email}}</p>
                    <div class="d-flex flex-column justify-content-between">
                    <a class="btn btn-primary" href="/user/edit" role="button">个人信息</a>
                    <a class="btn btn-success mt-2" href="/new?id={{user.id}}" role="button">发布Blog</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-10">
            {{if notes.length != 0}}
            {{each notes}}
            <div class="card mt-2">
                <div class="card-body">
                    <h4 class="card-title"><a href="/show?id={{$value.id}}">{{$value.title}}</a></h4>
                    <div class="card-subtitle text-muted mb-2">
                        {{$value.createTime.toLocaleDateString()}}
                    </div>
                    <div class="card-text mb-2">{{$value.description}}</div>
                    <div class="btn-box">
                        <a href="/edit?id={{$value.id}}"><button class="btn btn-info my-2 my-sm-0" type="submit">编辑</button></a>
                        <button  value="{{$value.id}}" class="delete btn btn-danger my-2 my-sm-0" type="submit"  data-toggle="modal" data-target="#myModal">删除</button>
                    </div>
                </div>
            </div>
            {{/each}}
            {{else}}
            <div class="card mt-4">
                <div class="card-body">
                    <h4 class="card-title"><a href="#">未编写过Blog</a></h4>
                    <div class="card-subtitle text-muted mb-2">
                    </div>
                    <div class="card-text mb-2"></div>
                </div>
            </div>
            {{/if}}
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" tabindex="-1" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示！</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>确认删除内容，一旦更改将无法改变</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button class="btn btn-danger" id="confirm">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态end -->
<!-- body end -->
{{/block}}
{{block 'script'}}
<script src="/public/js/user.js"></script>
{{/block}}